<template>
  <el-form ref="loginForm" :model="form" :rules="rules" label-width="0" size="large">
    <el-form-item prop="user">
      <el-input v-model="form.user" prefix-icon="el-icon-user" clearable :placeholder="$t('login.userPlaceholder')">
        <template #append>
          <el-select v-model="userType" style="width: 130px;">
            <el-option :label="$t('login.admin')" value="admin"></el-option>
            <el-option :label="$t('login.user')" value="user"></el-option>
          </el-select>
        </template>
      </el-input>
    </el-form-item>
    <el-form-item prop="password">
      <el-input v-model="form.password" prefix-icon="el-icon-lock" clearable show-password
        :placeholder="$t('login.PWPlaceholder')"></el-input>
    </el-form-item>
    <!-- <el-form-item style="margin-bottom: 10px;">
      <el-col :span="12">
        <el-checkbox :label="$t('login.rememberMe')" v-model="form.autologin"></el-checkbox>
      </el-col> -->
      <!-- <el-col :span="12" class="login-forgot">
        <router-link to="/reset_password">{{ $t('login.forgetPassword') }}？</router-link>
      </el-col> 
    </el-form-item>-->
    <el-form-item>
      <el-button type="primary" style="width: 100%;" :loading="islogin" round @click="login">{{ $t('login.signIn') }}
      </el-button>
    </el-form-item>
    <!-- <div class="login-reg">
      {{ $t('login.noAccount') }}
      <router-link to="/user_register">{{ $t('login.createAccount') }}</router-link>
    </div> -->
  </el-form>
</template>

<script setup lang="ts">
import { defineComponent, reactive, ref } from 'vue';
import i18n from '@/locales';
import { ElMessage, FormInstance } from 'element-plus';
import { useMenuApi } from '@/api/system';
import { useRouter } from 'vue-router';
import { useMainStore } from '@/store/modules/mainStore';
import {  useUserStore } from '@/store/modules/userStore'
import { useRouterMenuStore } from '@/store/modules/routerMenusStore';
import { IUserInfo } from '@/store/models/userInfoModel';
const routeStore = useRouterMenuStore()
defineComponent({name:'passwordForm'})
const router = useRouter()
const loginForm = ref<FormInstance>()
const userType = ref<string>('admin')
const mainStore = useMainStore()
const useStore = useUserStore()
const form = reactive({
  user: "admin",
  password: "admin",
  autologin: false
})
const rules = reactive({
  user: [
    {
      required: true,
      message: i18n.global.t("login.userError"),
      trigger: "blur"
    }
  ],
  password: [
    { required: true, message: i18n.global.t("login.PWError"), trigger: "blur" }
  ]
})
const islogin = ref<boolean>(false)
const login = async () => {
  await loginForm.value?.validate((valid, fields) => {
    if (!valid) {
      return false
    }
  })
  islogin.value = true
  // 设置token
  let nowDate = new Date()
  let token:string = "TS-"+nowDate.getTime()
  let createtime = nowDate.getTime()
  mainStore.setToken({access_token: token, create_time :createtime})
  // 获取菜单
  const menu = useMenuApi()
  routeStore.setMenus(menu)
 const user:IUserInfo = {userName:form.user,userNameF:''}
 user.userNameF = user.userName.substring(0,1)
  useStore.setUsers(user)
  router.push({path:'/'})
  ElMessage.success("Login Success 登录成功");
  islogin.value = false
};
</script>

<style>

</style>
